<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background: red;
            margin-left: 200px;
            margin-top: 50px;
        }
        .container{
            width: 100px;
            height: 2000px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="box"></div>

    <script>
        //一、 相对于自身的点击坐标  :鼠标点击的点 距离元素左上角的距离
        // offsetX offsetY : 相对于自身
        // var boxEle = document.querySelector(".box");
        // boxEle.onclick = function(event){
        //     var e = event || window.event;
        //     console.log(e.offsetX);
        //     console.log(e.offsetY);
        // }

        // 二、点击点 相对于 浏览器的坐标
        // clientX clientY ：相对于浏览器；
        // var boxEle = document.querySelector(".box");
        // boxEle.onclick = function(event){
        //     var e = event || window.event;
        //     console.log(e.clientX);
        //     console.log(e.clientY);
        // }


        // 三、点击的点相对于页面的坐标 
        // pageX pageY

        // var boxEle = document.querySelector(".box");
        // boxEle.onclick = function(event){
        //     var e = event || window.event;
        //     console.log(e.pageX);
        //     console.log(e.pageY);
        // }


        // 总结 ： width 、height 、left 、top  ： 元素的尺寸偏移量有关系；
        // x、y 和事件里的坐标有关系；   事件触发的坐标 ；
        // 主体不同；
        // offsetWidth：自身宽度+内边距+boderWidth 、clientWidth：自身宽度+内边距  、offsetLeft:1.没有定位：相对于页面的偏移量2.有定位：相对于父级的偏移量 、clientLeft：border-left的宽度
        // offsetX ：点击的时候相对于自身的左边的距离 、clientX ：相对于浏览器的左边的距离 、pageX ：相对于页面的左边的距离


    </script>
</body>
</html>